<script setup>
//导入自定义的axios实例
import axiosApi from '@/http/index.js'
import {ref,onBeforeMount} from "vue";

//声明变量接收远程返回的数据，默认值是空数组，返回的数据就是数组
const users = ref([])

//定义获取远程数据的函数
const getData = ()=>{
  //发送get请求，获取远程数据
  axiosApi.get('https://jsonplaceholder.typicode.com/users')
      .then(resp=>{ //请求成功返回数据，执行的代码块
        console.log('返回的数据:',resp)
        //接收返回的数据
        //users.value = resp.data //只需要data
        users.value = resp
      })
      .catch(error=>{ //请求发生错误，执行的代码块
        console.log('发生错误:',error)
      })
}
//在组件加载前去获取远程数据
onBeforeMount(()=>{
  //调用获取远程数据的函数即可
  getData()
})
</script>

<template>
    <div><button @click="getData">获取远程数据</button></div>
    <table width="100%" border="1">
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>用户名</td>
        <td>邮箱</td>
      </tr>
      <tr v-for="user in users ">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.email}}</td>
      </tr>
    </table>
</template>

<style scoped>

</style>